// // import { Directive, Input, HostListener, Output, EventEmitter, ElementRef } from '@angular/core';
// //
// // @Directive({
// //   selector: '[appDroppable]',
// //   standalone: true
// // })
// // export class DroppableDirective {
// //   @Input() appDroppable: any;
// //   @Output() itemDropped = new EventEmitter<{item: any, target: any}>();
// //
// //   constructor(private el: ElementRef) {}
// //
// //   @HostListener('dragover', ['$event'])
// //   onDragOver(event: DragEvent) {
// //     event.preventDefault();
// //     if (event.dataTransfer) {
// //       event.dataTransfer.dropEffect = 'move';
// //     }
// //     this.el.nativeElement.classList.add('drop-highlight');
// //   }
// //
// //   @HostListener('dragleave', ['$event'])
// //   onDragLeave(event: DragEvent) {
// //     this.el.nativeElement.classList.remove('drop-highlight');
// //   }
// //
// //   @HostListener('drop', ['$event'])
// //   onDrop(event: DragEvent) {
// //     event.preventDefault();
// //     this.el.nativeElement.classList.remove('drop-highlight');
// //
// //     try {
// //       const dragData = event.dataTransfer?.getData('application/json');
// //       if (dragData) {
// //         const item = JSON.parse(dragData);
// //         this.itemDropped.emit({ item, target: this.appDroppable });
// //       }
// //     } catch (error) {
// //       console.error('Error parsing drop data:', error);
// //     }
// //   }
// // }
//
// import { Directive, Input, HostListener, Output, EventEmitter, ElementRef } from '@angular/core';
//
// @Directive({
//   selector: '[appDroppable]',
//   standalone: true
// })
// export class DroppableDirective {
//   @Input() appDroppable: any;
//   @Output() itemDropped = new EventEmitter<{item: any, target: any}>();
//
//   constructor(private el: ElementRef) {}
//
//   @HostListener('dragover', ['$event'])
//   onDragOver(event: DragEvent) {
//     event.preventDefault();
//     if (event.dataTransfer) {
//       event.dataTransfer.dropEffect = 'move';
//     }
//     this.el.nativeElement.classList.add('drop-highlight');
//   }
//
//   @HostListener('dragleave', ['$event'])
//   onDragLeave(event: DragEvent) {
//     this.el.nativeElement.classList.remove('drop-highlight');
//   }
//
//   @HostListener('drop', ['$event'])
//   onDrop(event: DragEvent) {
//     event.preventDefault();
//     this.el.nativeElement.classList.remove('drop-highlight');
//
//     try {
//       const dragData = event.dataTransfer?.getData('application/json');
//       if (dragData) {
//         const item = JSON.parse(dragData);
//         this.itemDropped.emit({ item, target: this.appDroppable });
//       }
//     } catch (error) {
//       console.error('Error parsing drop data:', error);
//     }
//   }
// }
import { Directive, Input, HostListener, Output, EventEmitter, ElementRef } from '@angular/core';

@Directive({
  selector: '[appDroppable]',
  standalone: true
})
export class DroppableDirective {
  @Input() appDroppable: any;
  @Output() itemDropped = new EventEmitter<{item: any, target: any}>();

  constructor(private el: ElementRef) {}

  @HostListener('dragover', ['$event'])
  onDragOver(event: DragEvent) {
    event.preventDefault();
    if (event.dataTransfer) {
      event.dataTransfer.dropEffect = 'move';
    }
    this.el.nativeElement.classList.add('drop-highlight');
  }

  @HostListener('dragleave', ['$event'])
  onDragLeave(event: DragEvent) {
    this.el.nativeElement.classList.remove('drop-highlight');
  }

  @HostListener('drop', ['$event'])
  onDrop(event: DragEvent) {
    event.preventDefault();
    this.el.nativeElement.classList.remove('drop-highlight');

    try {
      const dragData = event.dataTransfer?.getData('application/json');
      if (dragData) {
        const item = JSON.parse(dragData);
        this.itemDropped.emit({ item, target: this.appDroppable });
      }
    } catch (error) {
      console.error('Error parsing drop data:', error);
    }
  }
}
